<template>
    <div class="estateHouseAdd">
        <div class="estateHouseAdd_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">{{text}}<i class="el-icon-close"></i></div>
		</div>
        <!-- 商家类型与返回 -->
        <div class="estateHouseAdd_type">
            <div>楼盘详情/<span class="text">{{text}}</span></div>
            <el-button @click="toBack" type="success">返回</el-button>
        </div>

        <!-- 基础信息 -->
        <div class="contentBox">
            <h3>基础信息</h3>
            <div class="top">
                <div class="item">
                    <div class="tit">户型名称</div>
                    <el-input style="width:30%;" v-model="form.title" placeholder="请输入户型名称" class="input" type="text"></el-input>
                </div>
                <div class="item">
                    <div class="tit">面积</div>
                    <el-input style="width:30%;" v-model="form.area" @blur="areaBlur" placeholder="请输入面积" class="input" type="number"></el-input>m²
                </div>
            </div>
            <div class="top">
                <!-- <div class="item">
                    <div class="tit">类型</div>
                     <el-select v-model="valueType" placeholder="请选择">
                        <el-option
                        v-for="item in selectType"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                        </el-option>
                    </el-select>
                </div> -->
                
                <div class="item">
                    <div class="tit">阳台数</div>
                    <el-input style="width:30%;" v-model="form.balcony_num" @blur="balconyBlur" placeholder="请输入阳台数" class="input" type="number"></el-input>
                </div>
                <div class="item">
                    <div class="tit">价格</div>
                    <el-input style="width:30%;" v-model="form.sale_price" @blur="priceBlur" placeholder="请输入价格" class="input" type="number"></el-input>万元
                </div>
            </div>
            <div class="top">
                <div class="item">
                    <div class="tit">客厅数</div>
                    <el-input style="width:30%;" v-model="form.parlour_num" @blur="parlourBlur" placeholder="请输入客厅数" class="input" type="number"></el-input>
                </div>
                <div class="item">
                    <div class="tit">卧室数</div>
                    <el-input style="width:30%;" v-model="form.bedroom_num" @blur="bedroomBlur" placeholder="请输入卧室数" class="input" type="number"></el-input>
                </div>
            </div>
            <div class="top">
                <div class="item">
                    <div class="tit">卫生间数</div>
                    <el-input style="width:30%;" v-model="form.toilet_num" @blur="toiletBlur" placeholder="请输入卫生间数" class="input" type="number"></el-input>
                </div>
                <div class="item">
                    <div class="tit">厨房数</div>
                    <el-input style="width:30%;" v-model="form.kitchen_num" @blur="kitchenBlur" placeholder="请输入厨房数" class="input" type="number"></el-input>
                </div>
            </div>

            <div class="top">
                <div class="item">
                    <div class="tit">户型简介</div>
                    <el-input style="width:90%" type="textarea" v-model="form.desc" rows="4" placeholder="户型简介~"></el-input>
                </div>
            </div>
            <div class="top">
                <div class="item">
                    <div class="tit">户型图</div>
                    <el-upload
                        action="/api/client/base/uploadfile"
                        list-type="picture-card"
                        :on-success="handleEstateSuccess"
                        :on-preview="handlePictureCardPreview"
                        :headers="myHeaders"
                        :file-list="fileList"     
                        :before-upload="beforeAvatarUpload"         
                        :limit="1" 
                        :auto-upload="true"
                        :on-remove="handleRemove">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </div>
                <!-- <p style="color:#a0a0a0;padding:10px 0 0 100px;">（每张图片大小不超过2M，尺寸建议宽度为640，并保持图片大小一致）</p> -->
            </div>
            <!-- <div class="case_3D" v-show="current==4">
                <div class="seach">      
                <el-input v-model="search3D"
                            placeholder="请输入酷家乐3D方案名称搜索"></el-input>
                <button @click="get3DCase"><i class="el-icon-search"></i>搜索</button>
                </div>

                方案搜索列表
                <div class="seachList">
                <div class="seachItem" v-for="(item,index) in case3DList" :key="index">
                    <span class="text3D">{{item.name}}</span>
                    <span class="selectBtn" @click="select3D(item)">选择</span>
                </div>
                </div>

                <div class="rela_3d" >
                <h4>已关联酷家乐3D方案：</h4>
                <div class="list">
                    <div class="text">{{rela3DList.name}}</div>
                    <img :src="rela3DList.coverPic?rela3DList.coverPic:''" alt="">
                </div>
                </div>
            </div> -->
        </div>
        <div class="btn">
            <el-button type="primary" @click="submitAdd">提交</el-button>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            myHeaders: {
              'access-token': this.$store.state.token  , //这里重新定义了请求头
              'Authorization': this.$store.state.token ,
              'user-id':this.$store.state.user_id
            },
            fileList:[],
            dialogImageUrl:'',
            dialogVisible:false,
            selectType:[],
            valueType:'',
            form:{
                estate_id:null,
                estate:'',
                title:'',
                desc:'',
                sale_price:'',
                area:'',
                parlour_num:'',
                bedroom_num:'',
                toilet_num:'',
                kitchen_num:'',
                balcony_num:'',
                house_type:'',
                thumb_url:'',
                province:'',
                city:'',
                district:'',
                province_id:'',
                city_id:'',
                district_id:'',
                // market_id:''
            },
            provinceObj:{},
            cityObj:{},
            districtObj:{},
            house_id:null, //户型id
            text:'添加户型'
        }
    },
    mounted(){
        this.getType()
        // this.form.market_id = this.$route.query.market_id
        this.form.estate_id = this.$route.query.estate_id
        this.form.estate = this.$route.query.estate

        if(this.$route.query.provinceObj){
            this.provinceObj = JSON.parse(decodeURIComponent(this.$route.query.provinceObj))
            this.cityObj = JSON.parse(decodeURIComponent(this.$route.query.cityObj))
            this.districtObj = JSON.parse(decodeURIComponent(this.$route.query.districtObj))
            console.log(this.provinceObj,this.cityObj,this.districtObj,'区域区域区域');
            
            this.form.province = this.provinceObj.city_name
            this.form.province_id = this.provinceObj.cityid
            this.form.city = this.cityObj.city_name
            this.form.city_id = this.cityObj.cityid
            this.form.district = this.districtObj.city_name
            this.form.district_id = this.districtObj.cityid
        }
        
        this.house_id = this.$route.query.house_id
        if(this.house_id){
            this.text = '户型详情'
            this.getHouseDetail()
        }

    },
    methods: {
        // 获取户型详情
        getHouseDetail(){
            this.$http.post('/api/root/EstateHouse/view',{id:this.house_id}).then(res=>{
                console.log(res,'户型详情');
                if(res.code==1){
                    this.form = res.data;
                    if(Array.isArray(res.data.thumb_url)){
                        res.data.thumb_url.map(item=>{
                            this.fileList.push({
                                id:item.id,
                                url:item.path
                            })
                        })
                    }else{
                        this.fileList.push({
                            id:res.data.thumb_url.id,
                            url:res.data.thumb_url.path
                        })
                    }
                }
            })
        },
        handleRemove(file, fileList) {
            this.fileList = fileList
        },
        handlePictureCardPreview(file) {
            this.dialogImageUrl = file.url;
            this.dialogVisible = true;
        },
        handleEstateSuccess(res,file,fileList) {
            this.fileList = fileList
        },
        beforeAvatarUpload(file) {
            const isLt2M = file.size / 1024 / 1024 < 2;
            if (!isLt2M) {
                this.$message.error('上传商品图片大小不能超过 2MB!');
            }
            return isLt2M;
        },
        // 获取类型
        getType(){
            this.$http.post('/api/root/option/getList').then(res=>{
                console.log(res,'类型列表');
                if(res.code==1){
                    this.selectType = res.data.house_type
                }
            })
        },
        // 返回
        toBack(){
            this.$router.back(1)
        },

        areaBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.area)){
                this.$message.warning('面积输入错误')
                return
            }
        },
        balconyBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.balcony_num)){
                this.$message.warning('阳台数输入错误')
                return
            }
        },
        priceBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.sale_price)){
                this.$message.warning('价格输入错误')
                return
            }
        },
        parlourBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.parlour_num)){
                this.$message.warning('客厅数输入错误')
                return
            }
        },
        bedroomBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.bedroom_num)){
                this.$message.warning('卧室数输入错误')
                return
            }
        },
        toiletBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.toilet_num)){
                this.$message.warning('卫生间数输入错误')
                return
            }
        },
        kitchenBlur(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.kitchen_num)){
                this.$message.warning('厨房数输入错误')
                return
            }
        },
        // 提交
        submitAdd(){
            let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/
            if(!reg.test(this.form.area)){
                this.$message.warning('面积输入错误')
                return
            }
            if(!reg.test(this.form.balcony_num)){
                this.$message.warning('阳台数输入错误')
                return
            }
            if(!reg.test(this.form.sale_price)){
                this.$message.warning('价格输入错误')
                return
            }
            if(!reg.test(this.form.parlour_num)){
                this.$message.warning('客厅数输入错误')
                return
            }
            if(!reg.test(this.form.bedroom_num)){
                this.$message.warning('卧室数输入错误')
                return
            }
            if(!reg.test(this.form.toilet_num)){
                this.$message.warning('卫生间数输入错误')
                return
            }
            if(!reg.test(this.form.kitchen_num)){
                this.$message.warning('厨房数输入错误')
                return
            }
            let imgId = []
            this.fileList.map(item=>{
                if(item.response){
                    imgId.push(item.response.data.id)
                }else{
                    imgId.push(item.id)
                }
            })
            this.form.thumb_url = imgId.join(',')
            let num1 = this.form.bedroom_num?this.form.bedroom_num:0
            let num2 = this.form.parlour_num?this.form.parlour_num:0
            let num3 = this.form.kitchen_num?this.form.kitchen_num:0
            let num4 = this.form.toilet_num?this.form.toilet_num:0
            this.form.house_type = num1+'室'+num2+'厅'+num3+'厨'+num4+'卫'
            console.log(this.form.house_type,'户型');
            console.log(this.form,'提交数据');
            let url = this.house_id?'/api/root/EstateHouse/edit':'/api/root/EstateHouse/add';
            this.$http.post(url,this.form).then(res=>{
                console.log(res,'提交结果');
                if(res.code==1){
                    this.$message.success(this.house_id?'修改成功':'添加成功')
                    this.$router.back(1)
                }else{
                    this.$message.warning(res.msg)
                }
            })
        }
    },
}
</script>

<style lang="less">
 @import 'estateHouseAdd.less';
</style>

